<template lang="html">
  <div class="menu-container">
    <el-tree
      :data="treeData"
      :props="defaultProps"
      accordion
      :highlight-current="true"
      :expand-on-click-node="true"
      @node-click="handleNodeClick">
    </el-tree>
  </div>
</template>

<script>
import {
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import {
  arrClassify
} from 'common/js/arrClassify'

import {getMenu} from 'api/aside.js'

export default {
  name: 'tree',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: []
    }
  },
  computed: {
    ...mapGetters([
      'menusData'
    ])
  },
  created() {
    getMenu().then((res) => {
      let data = res.data
      this.setMenusData(data)
      this.treeData = arrClassify(data)
    })
  },
  methods: {
    handleNodeClick(data) {
      let obj = {}
      let {
        id,
        name,
        orderNum,
        pid,
        status
      } = data
      obj.id = id
      obj.name = name
      obj.orderNum = orderNum
      obj.pid = pid
      obj.status = status.toString()
      this.setMenuDetails(obj)
    },
    ...mapMutations({
      setMenuDetails: 'SET_MENU_DETAILS'
    }),
    ...mapActions([
      'setMenusData'
    ])
  },
  watch: {
    menusData(newVal) {
      this.treeData = arrClassify(newVal)
    }
  }
}
</script>

<style lang="scss">
.menu-container {
    margin: 0 25px 0 10px;
}
</style>
